<template>
    <div class="container">
        <img :src="imgUrl" style="width: 16vw"/>
        <div class="flex-r"
             style="flex: 1;margin-right: 20px;margin-left: 10px;align-self: flex-start;align-items: flex-start">
            <div class="flex-c" style="align-items: flex-start">
                <span v-text="name" class="text"></span>
                <span v-text="describe" class="tip"></span>
            </div>
            <div class="flex-c" style="align-items: flex-end">
                <span v-text="getPrice" class="text"></span>
                <span v-text="getCount" class="count"></span>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';

  export default {
    /** kebab-case */
    name: 'item-goods-order',

    data() {
      return {};
    },
    /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
     String/Number/Boolean/Function/Object/Array/Symbol */
    props: {
      imgUrl: {
        type: String,
        required: true
      },
      name: {
        type: String,
        required: true
      },
      describe: {
        type: String,
        required: true
      },
      price: {
        type: String,
        required: true
      },
      count: {
        type: String,
        required: true
      }
    },

    components: {},

    methods: {
      getIcon(icon) {
        return Public.ossImg + icon + '.svg';
      }
    },
    computed: {
      getPrice() {
        return '¥' + this.price;
      },
      getCount() {
        return 'x' + this.count;
      }
    },
    watch: {
      // 监听具体数据变化，并做相应的处理
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../assets/stylus/main.styl";
    .flex-r
        flex-x()

    .flex-c
        flex-y()

    .center
        flex-center()

    .divider
        divider()

    .space
        space()

    .container
        background-color white
        height 21vw
        width 100vw
        padding 10px 0 10px 10px
        flex-x()
        /*margin-bottom 1px*/
        bor-b()
        box-sizing border-box

    .text
        word(16px, #666)

    .tip
        word(14px, #666)
        line-height: 1.6;

    .count
        word(12px, #666)
</style>
